<%@ page language="java" pageEncoding="UTF-8"
         contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <%@ include file="/common/common.jsp" %>
    <meta name="format-detection"
          content="telephone=no,email=no,date=no,address=no">
    <!-- jquery wui -->
   
     <link rel="stylesheet" type="text/css" href="../statics/aui/css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx }/css/weui.min.css"/> 
    <link rel="stylesheet" type="text/css" href="${ctx }/css/jquery-weui.css"/>
    <!-- jquery wui -->
    <!---扇形图绘制js-->
    <script src="${ctx}/js/highcharts/highcharts.js"></script>
    <%--<script src="${ctx}/js/highcharts/exporting.js"></script>--%>
    <script src="${ctx}/js/highcharts/highcharts-zh_CN.js"></script>
    <script src="${ctx}/js/highcharts/drilldown.js"></script>
    <!---扇形图绘制js-->

    <title>交易管理</title>
    <style type="text/css">
        .receivables_text {
            font-family: PingFangSC-Regular;
            font-size: 15px;
            color: #666666;
            line-height: 30px;
            text-align: right;
        }

        .div-a {
            display: inline;
            width: 49%;
        }

        .div-d {
            display: inline;
            text-align: right;
            float: right;
            margin-right: 20px;
        }

        .div-c {
            display: inline;
            width: 29%;
            text-align: right;
            float: right;
            margin-right: 20px;
        }

        .fixedBox {
            z-index: 10;
            bottom: 3.0rem;
            position: fixed;
            right: 20px;
        }

        /*遮罩层处理*/
        #test {
            width: 100%;
            height: 100%;
            background-color: #000;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 20;
            opacity: 0.3;
            /*兼容IE8及以下版本浏览器*/
            filter: alpha(opacity=30);
            display: none;
        }

        #log_window {
            width: 100%;
            height: 85%;
            background-color: #efefef;
            position: fixed;
            z-index: 30;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: none;
        }

        .aui-btn-blockNew {
            font-size: 0.7rem;
            height: 1.6rem;
            line-height: 1.6rem;
            margin-bottom: 0.1rem;
            margin-right: 0.1rem;
            margin-top: 0.1rem;
        }

        .aui-btn-blockCZQD {
            font-size: 0.9rem;
            height: 2.5rem;
            line-height: 2.55rem;
            margin-bottom: 0;
            width: 49%;
        }

        .aui-list-item-inner-div {
            align-items: center;
            display: flex;
        }
    </style>
</head>
<body>
<!--------------------------数据搜索块--------------->
<div id="test"></div>
<div id="log_window">
    <form action="${ctx}/trading/center" id="centerForm" name="centerForm">
        <section class="aui-content">
            <ul class="aui-list">

                <li class="aui-list-item" style="border-bottom-color: #FFFFFF">
                    <div class="aui-list-item-inner-div">
                        <div class="aui-list-item-title receivables_text">收款方式</div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner-div" style="float:left">
                        <section class="aui-content" id="pResource"
                                 style="padding-left: 15px; padding-right: 15px;">
                            <p>
                                <input type="hidden" id="resource" name="resource" value="${resource}">
                            <div class="aui-btn aui-btn-blockNew <c:forEach var="resource" items="${payorder.resourceList}" varStatus="name" ><c:if test="${resource==0}">aui-btn-info</c:if></c:forEach>"
                                 resourceVal="0" onclick="resourceValue(this)">微信
                            </div>
                            <div class="aui-btn aui-btn-blockNew <c:forEach var="resource" items="${payorder.resourceList}" varStatus="name" ><c:if test="${resource==1}">aui-btn-info</c:if></c:forEach>"
                                 resourceVal="1" onclick="resourceValue(this)">支付宝
                            </div>
                            </p>
                        </section>
                    </div>
                </li>
                <li class="aui-list-item" style="border-bottom-color: #FFFFFF">
                    <div class="aui-list-item-inner-div">
                        <div class="aui-list-item-title receivables_text">交易状态</div>
                    </div>
                </li>
                <li class="aui-list-item   ">
                    <div class="aui-list-item-inner-div">
                        <section class="aui-content" id="pStatusValue"
                                 style="padding-left: 10px;padding-right: 10px;">
                            <p>
                                <input type="hidden" id="status" name="status" value="${status}">
                            <div class="aui-btn aui-btn-blockNew <c:forEach var="status" items="${payorder.statusList}" varStatus="name" ><c:if test="${status==1}">aui-btn-info</c:if></c:forEach>"
                                 statusValue="1" onclick="statusValue(this)">收款成功
                            </div>
                            <div class="aui-btn aui-btn-blockNew <c:forEach var="status" items="${payorder.statusList}" varStatus="name" ><c:if test="${status==0}">aui-btn-info</c:if></c:forEach>"
                                 statusValue="0" onclick="statusValue(this)">收款失败
                            </div>
                            <%--<div class="aui-btn aui-btn-blockNew" statusValue="0" onclick="statusValue(this)">收款异常</div>
                            --%>
                            <div class="aui-btn aui-btn-blockNew <c:forEach var="status" items="${payorder.statusList}" varStatus="name" ><c:if test="${status==2}">aui-btn-info</c:if></c:forEach>"
                                 statusValue="2" onclick="statusValue(this)">全部退款
                            </div>
                            </p>
                        </section>
                    </div>
                </li>

                <li class="aui-list-item" style="border-bottom-color: #FFFFFF">
                    <div class="aui-list-item-inner-div">
                        <div class="aui-list-item-title receivables_text">交易时间</div>
                    </div>
                </li>


                <li class="aui-list-item">
                    <div class="aui-list-item-inner-div">

                        <div class="aui-list-item-media"
                             style="width: 7.0rem; padding-left: 20px; padding-right: 20px;">
                            <input type="text" id="my-input" name="orderdateBegin" data-toggle='date'
                                   placeholder="交易开始时间" value="${orderdateBegin}">
                        </div>
                        至
                        <div class="aui-list-item-media"
                             style="width: 7.0rem; padding-left: 20px; padding-right: 20px;">
                            <input type="text" id="my-input2" name="orderdateEnd" data-toggle='date'
                                   placeholder="交易结束时间" value="${orderdateEnd}">
                        </div>

                    </div>
                </li>
                <%-- <li class="aui-list-item">
                     <div class="aui-list-item-inner">

                         <label for="switchCP" class="weui-switch-cp">
                             <input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked">
                             <div class="weui-switch-cp__box"></div>0
                         </label>

                     </div>
                 </li>--%>
            </ul>
        </section>
        <section class="aui-content"
                 style="margin-top: 20px; padding-left: 20px; padding-right: 20px;">
            <p>
            <div class="aui-btn aui-btn-blockCZQD" onclick="resetFrom()">重置</div>
            <div class="aui-btn aui-btn-info aui-btn-blockCZQD" onclick="submitCenter()">确定</div>
            </p>
        </section>

        <section class="aui-content"
                 style="margin-top: 25px; padding-left: 20px; padding-right: 20px;">
            <p>
                <img onclick="cancel_shield()" style="margin: 0 auto;" src="../statics/aui/images/sxgban.png">
            </p>
        </section>
    </form>
</div>
<!--------------------------数据搜索块--------------->

<img class="fixedBox" onclick="shield()" src="../statics/aui/images/sx.png">
<%--<footer class="aui-bar aui-bar-tab "><!--aui-margin-t-15 aui-margin-b-15-->
    <div class="aui-bar-tab-item aui-border-r" tapmode style="width: 3rem;"
         onclick="location='../trading/center'">
        <div>
            <center>
                <img alt="" src="../statics/aui/images/jyzxls.png">
            </center>
        </div>
        <div class="aui-bar-tab-label receivables_128ee9 ">交易中心</div>
    </div>
    <div class="aui-bar-tab-item" tapmode style="width: 3rem;"
         onclick="location='../auth/isMerchant'">
        <div>
            <center>
                <img alt="" src="../statics/aui/images/sjzxhs.png">
            </center>
        </div>
        <div class="aui-bar-tab-label receivables_999999">商家中心</div>
    </div>
</footer>--%>
<div style="width: 100%; height: 108px; background-color: #FFFFFF; padding-top: 24px;">
    <div style="float: left; width: 100%; height: 100%; padding-left: 10px;">
        <table width="100%">
            <tr height="61px">
                <td>
                    <div
                            style="font-family: PingFangSC-Regular; font-size: 24px; color: #128ee9; line-height: 17px; text-align: center;">${todaySumAmount }</div>
                    <div
                            style="opacity: 0.65; font-family: PingFangSC-Regular; color: #666666; line-height: 44px; font-size: 14px; text-align: center;">
                        今日交易金额(元)
                    </div>
                </td>
                <td
                        style="border: 1.5px; height: 59.5px; background-color: #666666"></td>
                <td>
                    <div
                            style="font-family: PingFangSC-Regular; font-size: 24px; color: #128ee9; line-height: 17px; text-align: center;">${countRecord }</div>
                    <div
                            style="opacity: 0.65; font-family: PingFangSC-Regular; color: #666666; line-height: 44px; font-size: 14px; text-align: center;">
                        成功交易笔数
                    </div>

                </td>
            </tr>

        </table>
    </div>

    <!---------------扇形图-----各店铺今日交易情况--------->
    <div id="container"></div>
    <pre id="tsv" style="display:none">${seriesJson}</pre>
    <pre id="drilldown" style="display:none">${drilldownJson}</pre>

    <script type="text/javascript">
        var boolStart = "${bool}";
        var str = $("#tsv").text();
        var drilldown = $("#drilldown").text();
        if (boolStart == "success" || boolStart == "change") {
            if (boolStart == "change") {
                str = drilldown;
                drilldown = "";
            }
            var text = "${title}";
            var Str = eval('(' + str + ')');
            var drilldownJson = eval('(' + drilldown + ')');
            $(function () {
                // 创建图例
                $('#container').highcharts({
                    chart: {
                        type: 'pie'
                    },
                    title: {
                        text: text
                    }, legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle'
                    },
                    subtitle: {
                        text: ''
                    },
                    plotOptions: {
                        series: {
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}: {point.y:.2f}%'
                            }
                        }, pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: false
                            },
                            showInLegend: true
                        }
                    },
                    tooltip: {
                        headerFormat: '',
                        pointFormat: '{point.name}<br/><span style="color:{point.color}">交易金额:{point.y}</span>'
                    },
                    series: [{
                        name: '',
                        colorByPoint: true,
                        data: Str
                    }],
                    drilldown: {

                        series: drilldownJson

                    }
                });
            });
        } else {

        }
    </script>
    <!--扇形图--->


    <c:forEach items="${dateGroupingList}" var="dateGrouping">
    <div>
        <c:choose>
            <c:when
                    test="${fn:substring(dateGrouping.dateFormat,5,10)==today }">
                <div class="div-a">今日</div>
                <div class="div-d">￥${dateGrouping.sumAmount }</div>
                <div class="div-c">共${dateGrouping.countId }笔</div>
            </c:when>
            <c:otherwise>
                <div class="div-a">${fn:substring(dateGrouping.dateFormat,5,10)}</div>
                <div class="div-d">￥${dateGrouping.sumAmount }</div>
                <div class="div-c">共${dateGrouping.countId }笔</div>
            </c:otherwise>
        </c:choose>
    </div>

    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-media-list">

            <c:forEach items="${tradeRecordList }" var="tradeRecord">

                <c:if test="${tradeRecord.dateFormat==dateGrouping.dateFormat}">
                    <li class="aui-list-item aui-list-item-middle">
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media" style="width: 3rem;">
                                <img
                                        src="<c:if test="${tradeRecord.resource==0 }">../statics/aui/images/wechat.png</c:if>
							<c:if test="${tradeRecord.resource==1 }">../statics/aui/images/alipay.png</c:if>">
                            </div>
                            <div class="aui-list-item-inner aui-list-item-arrow ">
                                <table style="width: 100%">
                                    <tr onclick="location='${ctx}/trading/details?recordNo=${tradeRecord.recordNo}'">
                                        <td>
                                            <div
                                                    style="font-family: PingFangSC-Regular; font-size: 17px; color: #333333; text-align: left;">

                                                <c:choose>
                                                    <c:when test="${tradeRecord.category==0 }">
                                                        <c:choose>
                                                            <c:when test="${tradeRecord.payResult==0 }">收款成功</c:when>
                                                            <c:otherwise>收款失败</c:otherwise>
                                                        </c:choose>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <c:choose>
                                                            <c:when test="${tradeRecord.payResult==0 }">

                                                                <c:choose>
                                                                    <c:when test="${tradeRecord.status==2 }">退款成功</c:when>
                                                                    <c:when test="${tradeRecord.status==5 }">退款处理中</c:when>
                                                                    <c:otherwise>退款失败</c:otherwise>
                                                                </c:choose>

                                                            </c:when>
                                                            <c:otherwise>退款失败</c:otherwise>
                                                        </c:choose>
                                                    </c:otherwise>
                                                </c:choose>
                                            </div>
                                            <div
                                                    style="font-family: PingFangSC-Regular; font-size: 15px; color: #666666; text-align: left;">
                                                <fmt:formatDate value="${tradeRecord.orderdate }"
                                                                pattern="HH:mm:ss"/>
                                            </div>
                                            <div
                                                    style="opacity: 0.98; font-family: PingFangSC-Regular; font-size: 13px; color: #999999; text-align: left;">
                                                订单号${tradeRecord.recordNo }</div>
                                        </td>
                                        <td style="font-family: PingFangSC-Regular; font-size: 16px; color: #333333; text-align: right;">
                                            ¥${tradeRecord.amount }</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </li>
                </c:if>
            </c:forEach>
        </ul>
    </div>

    </c:forEach>
	
<div id="dialogs">
    <div class="js_dialog" id="iosDialog2" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd" id="DialogMessage"></div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary DeleteDefault">确定</a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    ///收款方式  来源（0 微信、1 支付宝）
    function resourceValue(obj) {
        if ($(obj).hasClass("aui-btn-info")) { //判断是否包含此样式
            $(obj).removeClass("aui-btn-info");
        } else {
            $(obj).addClass("aui-btn-info");
        }
        var resourceValue = "";
        $("#pResource").children("div").each(function () {
            if ($(this).hasClass("aui-btn-info")) {
                resourceValue = resourceValue + $(this).attr("resourceVal") + ","
            }
        });
        $("#resource").val(resourceValue);
    }

    ///交易状态   支付状态（0 未知 1 已付款 2 已退款 3 已对账 4已关闭,5退款处理中）
    function statusValue(obj) {
        if ($(obj).hasClass("aui-btn-info")) { //判断是否包含此样式
            $(obj).removeClass("aui-btn-info");
        } else {
            $(obj).addClass("aui-btn-info");
        }
        var statusValue = "";
        $("#pStatusValue").children("div").each(function () {
            if ($(this).hasClass("aui-btn-info")) {
                statusValue = statusValue + $(this).attr("statusValue") + ","
            }
        });
        $("#status").val(statusValue);
    }
	
    //错误提示弹框
    var $iosDialog2 = $('#iosDialog2');
    $('#dialogs').on('click', '.DeleteDefault', function () { //取消按钮事件
        $(this).parents('.js_dialog').fadeOut(200);
    });
    
    //日期选取
    var myinputDval = '${dateStartLong}';
    var myinput2Dval = '${dateEndLong}';
    console.log("默认开始时间dateStartLong+"+myinputDval+'默认结束时间 dateEndLong:'+myinput2Dval);
    $("#my-input").calendar({
        dateFormat: 'yyyy-mm-dd',
        onChange: function (p, values, displayValues) {
            myinputDval = displayValues;
        },
        onClose: function (p) {
            	console.log("开始时间：--------"+p.value+"结束时间:============"+myinput2Dval);
           	if (myinput2Dval != null && '' != myinput2Dval  && p.value != null && '' != p.value) {
            	if (myinput2Dval < p.value) {
            		alert('交易开始时间必须小于等于结束时间');
            		//$("#DialogMessage").html("交易开始时间必须小于等于结束时间");
                    //$iosDialog2.fadeIn(200);
                    $("#my-input").val("");
                } else if (myinput2Dval - p.value > 2592000000) { //最多查询30天数据
                	alert('查询时间段只能在30天之内');
                	//$("#DialogMessage").html("查询时间段只能在30天之内");
                    //$iosDialog2.fadeIn(200);
                    $("#my-input").val("");
                }
           	}
        }
    });
    $("#my-input2").calendar({
        dateFormat: 'yyyy-mm-dd',
        onChange: function (p, values, displayValues) {
            myinput2Dval = displayValues;
        },
        onClose: function (p) {
            	console.log("结束时间：--------"+p.value+"开始时间:============"+myinputDval);
           	if (myinputDval != null && '' != myinputDval && p.value != null && '' != p.value ) {
            	if (myinputDval > p.value) {
            		alert('交易结束时间必须大于等于开始时间');
                    //$("#DialogMessage").html("交易结束时间必须大于等于开始时间");  
                    //$iosDialog2.fadeIn(200);
                    $("#my-input2").val("");
                } else if (p.value - myinputDval > 2592000000) {//最多查询30天数据
                	alert('查询时间段只能在30天之内');
                	//$("#DialogMessage").html("查询时间段只能在30天之内");
                    //$iosDialog2.fadeIn(200);
                    $("#my-input2").val("");
                }
           	}
        }
    });

    function shield() {
        var s = document.getElementById("test");
        s.style.display = "block";
        var l = document.getElementById("log_window");
        l.style.display = "block";
    }

    function cancel_shield() {
        var s = document.getElementById("test");
        s.style.display = "none";
        var l = document.getElementById("log_window");
        l.style.display = "none";
    }

    //提交form表单
    function submitCenter() {
        $("#centerForm").submit();
    }

    //重置
    function resetFrom() {
    	$("#my-input").val("");
    	$('#my-input2').val("");
        //$("#centerForm").result();
        $('.aui-btn.aui-btn-blockNew.aui-btn-info').removeClass('aui-btn-info');
        //document.getElementById("centerForm").reset();
    }

</script>
</body>
</html>
